Function Object

function Object 와 function Instance

Built-in Function Object

자바스크립트에는 built-in Function Object가 있다.
Function.prototype.call()형태로 자바스크립트에 만들어져 있다.

• function book(){...} 와 같이 function 키워드로 function Object를 만들 수 있으며, 또한 var temp = function(){...} 와 같이 function Object를 만들고 변수에 할당할 수 있다.
• built-in의 Function.prototype에 메소드로 연결하는 방식이다.

function Instance

• new 연산자를 사용해서 new Book() 함수 인스턴스를 만들 수 있다.
• Book.prototype에 연결된 메소드를 생성하는 것이다.

function Object의 생성

1. var book = function(){...}와 같이 function 키워드를 이용하여 함수를 선언
2. 엔진이 function 키워드를 만나면, 엔진은 built-in Function Object의 prototype에 연결된 메소드로 function Object를 생성한다.
   • 성격은 인스턴스이지만, new로 만든 인스턴스와는 차이가 있다.
3. 생성한 function object를 book 변수에 할당한다.
4. function object는 나중에 book()과 같은 형태로 호출이 가능하다.

function Object 저장 형태

• 함수를 호출하려면, 생성한 function object를 저장해야 한다.
• function object는 {name : value}형태로 저장한다.
  • book()함수의 경우 {book: 생성된 function object}의 형태로 저장됨
• 함수를 호출하면, 이것저것 저장되어 있는 영역에 가서, 이름으로 value 값을 들고온다.(식별자 해결 Identifier Resolution) 이때 value가 function object면 함수 호출을 한다.
  • function object만 따로 저장되어 있는 곳이 아니라, 변수들도 같이 저장되어 있을 것이란 걸 알 수 있다.

즉

• new를 사용해서 만든 function instance는 함수명.prototype의 메소드로 연결되는 것이며,
• function 키워드를 사용해서 만든 function object는 Function.prototype의 메소드로 연결된다.(JS built-in Function Object의 메소드가 된다.)

• 함수가 호출되면 엔진은, 함수의 실행 환경(함수 내부에 선언된 변수나 함수)을 {name: value}와 같은 프로퍼티 형태로 설정한 후에, 실행을 시작한다.
• 따라서 함수나 변수나 엔진은 Identifier Resolution 단계를 거치고 value 값의 타입에 따라서 동작이 달라지게 된다.

Function Object의 생성과정

1. 개발자가 function sports(){...} 키워드를 사용해서 함수를 선언
2. 엔진이 function 키워드를 만나면, function object를 생성하고 {sports : {...}}의 형태로 저장한다. 이때 value 값 {...}은 아직 비어 있다.

1. sports 오브젝트에 prototype 오브젝트를 프로퍼티로 넣는다.
2. prototype에 constructor 프로퍼티를 넣는다.
   • prototype.constructor가 sports 오브젝트를 참조한다. 상단에 쓰여있는 sports와 constructor의 sports는 값이 동일하다.
3. prototype에 __proto__ 오브젝트를 넣는다.
   • 엔진이 사용하기 위해 있는 프로퍼티.
   sports = { prototype: { constructor: sports, __proto__: {}, }, };

4. JS built-in Object.prototype의 메소드로 Object 인스턴스를 생성하고 **prototype.__proto__**에 할당한다.
   • built-in Object.prototype에 있는 기본적인 메소드 6개가 할당되는 것이다.
   sports = { prototype: { constructor: sports, __proto__: Object.prototype, }, };
5. sports 오브젝트에, __proto__ 프로퍼티를 추가한 후, JS built-in Function.prototype의 메소드로 Function 인스턴스를 생성하여 할당한다.
   • 이 단계에서, call(), bind(), apply() 메소드가 첨부된다.
   sports = { prototype: { constructor: sports, __proto__: Object.prototype, }, __proto__: Function.prototype, };

__proto__가 두 개 존재하지만, 계층이 다름을 알고 있어아 한다.

• sports.prototype.__proto__에는 Object.prototype으로 할당(bulit-in Object가 생성되어 할당됨)
• sports.__proto__에는 Function.prototype으로 할당(Built-in Function이 생성되어 할당됨)
  • 만약 생성하는 게 함수가 아니라, Array나 String이면, Array인스턴스나 String 인스턴스가 연결된다. 즉 object 타입에 따라서 바뀌는 부분이다.

6. sports 오브젝트의 프로퍼티에 초기값 설정

• argument,caller,length,name 프로퍼티가 설정된다.

  sports = { argument: {}, caller: {}, length: 0, name: "sports", prototype: { constructor: sports, __proto__: Object.prototype, }, __proto__: Function.prototype, };

정리하자면,

우리는 함수라고 생각하지만, 엔진 관점에선 함수 또한 하나의 객체 sport = {}라고 생각한다.